iT邦幫忙

2021 iThome 鐵人賽

DAY 14
0
Modern Web

30天學 React.js 系列 第 14

[Day14][筆記] React 事件處理

  • 分享至 

  • xImage
  •  

重點整理

  • 事件命名上必須使用小駝峰,且為 String
  • 事件中必須放一個回傳 Function
return (
  <button onClick={() => {}}>事件</button>
  <button onClick={clickHandler}>Submit</button>
)

注意

記得如果我們替事件加上 (),代表程式會直接執行

我們直接看範例好嘞,不然感覺好像在講廢話,以下面為例

會進入一個無限迴圈狀態!

const [state,setState] = useState(1);

const clickHandler = (e) => {
    // 執行函式
    e.preventDefault();
    setState(state +1);
}

return (
  <button onClick={clickHandler()}>Submit</button>
)

補充

  1. 剛好看到一個產生陣列數量的小技巧,紀錄一下
[...Array(5).keys()]
//[0,1,2,3,4]
  1. 為何不能在 JSX 中撰寫 for 迴圈,是因為 for 迴圈本身是個 Statement,並不會有回傳值。所以以此類推沒有回傳值的方法都不能寫在 JSX 中。

上一篇
[Day13] [筆記]React Hooks-UseReducer
系列文
30天學 React.js 14
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言